<template>
	<view class="content">
		<view class="real-con" style="margin-top: 23rpx;padding: 23rpx;">
			<view>上传{{name}}</view>
			<view class="flex-row" style="justify-content: space-between;margin-top: 15rpx;">
				<view class="real-upload">
					<view style="width: 250rpx;height: 175rpx;">
						<u-upload @afterRead="afterRead" :maxCount="1" width="250" height="175">
							<image v-if="imgUrl" :src="imgUrl" style="width: 250rpx;height: 175rpx;display: block;">
							</image>
							<image v-else :src="$IMG_URL+'portraitFace.png'" mode="widthFix"
								style="width: 250rpx;height: 175rpx;"></image>
						</u-upload>
					</view>
					<view style="margin-top: 15rpx;">证件正面</view>

				</view>
				<view class="real-upload">
					<view style="width: 250rpx;height: 175rpx;">
						<u-upload @afterRead="afterReadA" :maxCount="1" width="250" height="175">
							<image v-if="imgUrlA" :src="imgUrlA" style="width: 250rpx;height: 175rpx;display: block;">
							</image>
							<image v-else :src="$IMG_URL+'nationalEmblem.png'" mode="widthFix"
								style="width: 250rpx;height: 175rpx;"></image>
						</u-upload>
					</view>
					<view style="margin-top: 15rpx;">证件反面</view>
				</view>
			</view>
		</view>
		<view class="wallet-desc">
			<view>证书上传须知：</view>
			<view>1、证书照片要求拍摄完整，确保可以清晰识别证件信息。</view>
			<view>2、证件需在有效期内，应复审证件复审通过方可有效。。</view>
		</view>

		<view class="withdraw-but">
			<u-button type="primary" shape="circle" text="确认" @click="submitForm"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/service';
	export default {
		data() {
			return {
				imgUrl: "",
				imgUrlA: "",
				name: "",
			}
		},
		onLoad(option) {
			this.name = option.name
			uni.setNavigationBarTitle({
				title: option.name
			});
		},
		methods: {
			async afterRead(event) {
				const res = await this.uploadFilePromise(event.file.url)
				console.log(111, res);
				this.imgUrl = res.url

			},
			async afterReadA(event) {
				const res = await this.uploadFilePromise(event.file.url)
				this.imgUrlA = res.url
			},
			uploadFilePromise(file) {
				uni.showLoading({
					title: '上传中...'
				});
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl + 'common/upload', // 仅为示例，非真实的接口地址
						filePath: file,
						name: 'file',
						success: (res) => {
							console.log(res);
							if (res.data) {
								const idCard = JSON.parse(res.data)
								resolve(idCard)
							}
							uni.hideLoading()
						}
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 23rpx;
	}

	.real-con {
		width: 688rpx;
		padding: 0 23rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		font-size: 27rpx;
		color: #000000;
	}

	.real-item {
		display: flex;
		align-items: center;
		padding: 31rpx 0;
	}

	.real-upload {
		width: 312rpx;
		height: 250rpx;
		background-color: #E1F1FF;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 19rpx;
		color: #666666;
	}

	.wallet-desc {
		width: 688rpx;
		font-size: 27rpx;
		color: #999999;
		line-height: 38rpx;
		margin-top: 23rpx;
	}

	.withdraw-but {
		width: 688rpx;
		margin-top: 77rpx;

		& ::v-deep .u-button {
			height: 77rpx !important;
		}
	}
</style>